<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="renderer" content="webkit" />
		<title>404</title>
		<!--[if lt IE 9]>
			<meta http-equiv="refresh" content="0;ie.html" />
		<![endif]-->
		<link href="../css/bootstrap.min.css" rel="stylesheet" />
		<link href="../iconfont/iconfont.css" rel="stylesheet" />
		<link href="../js/layui/css/layui.css" rel="stylesheet" type="text/css">
		<link href="../css/style.css" rel="stylesheet" />
		<link href="../css/cross.css" rel="stylesheet" />
		<link href="../css/change.css" rel="stylesheet" />
	</head>

	<body class="gray-bg body-con">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="index-con clearfix">
				<div class="index-w-29 mr-20">
					<div class="index-msg h-100 clearfix">
						<img src="../images/msg-icon.png" >
						<div class="index-msg-t">
							早上好！您有 <i class="im-num">3</i> 条医院质控审核还未审核。<a href="javascript:;">去审核<i class="iconfont icon-xiangyou"></i></a>
						</div>
					</div>
					<div class="mt-20 index-msg hsf-125">
						<ul class="tab-list">
							<li class="curr">01基础配置与人力配置</li>
							<li>02工作制度与工作流程</li>
						</ul>
						<div id="main4" class="echart-box" style="width: 100%;height:88%"></div>
					</div>
					<div class="mt-20 index-msg hsb-125">
						<ul class="tab-list">
							<li class="curr">03诊治能力与质量控制</li>
							<li>04健康管理与健康教育</li>
						</ul>
						<div id="main6" class="echart-box" style="width: 100%;height:88%"></div>
					</div>
				</div>
				<div class="index-w-42 index-msg hs-110 mr-20">
					<!-- 注册医院提交质控数据 -->
					<div class="indicators-con clearfix">
						<div class="fl indicators-item mr-12 bg-EDF3FF">
							<div class="">
								<img src="../images/index1.png" >
								<span>
									<h5>注册医院</h5>
									<p>申请注册的医疗机构</p>
								</span>
							</div>
							<h1>186</h1>
						</div>
						<div class="fl indicators-item bg-F1F9F4">
							<div class="">
								<img src="../images/index2.png" >
								<span>
									<h5>提交质控</h5>
									<p>2021年质控提交的医院</p>
								</span>
							</div>
							<h1>89</h1>
						</div>
					</div>
					<!-- 地图 -->
					<div id="main2" style="width: 100%;height: calc(100vh - 450px);">
						
					</div>
					<!-- 柱状图 -->
					<div id="main3" style="width: 100%;height: 175px;">
						
					</div>
				</div>
				<div class="index-w-29 index-msg hs-110">
					<!-- 折线图 -->
					<div id="main1" style="width: 100%;height: 50%">
						
					</div>
					<!-- 饼状图 -->
					<div id="main5" style="width: calc(100% + 40px);height: 50%;margin-left: -20px;">
						
					</div>
				</div>
			</div>
		</div>
		<!-- 全局js -->
		<script src="../js/jquery.min.js?v=2.1.4"></script>
		<script src="../js/bootstrap.min.js?v=3.3.7"></script>
		<script src="../js/echarts.min.js"></script>
		<script type="text/javascript" src="../js/fujian.js"></script>
		<!-- 自定义js -->
		<script src="../js/content.js"></script>
	</body>
	<script type="text/javascript">
		$('.tab-list li').on('click', function() {
			$(this).addClass('curr').siblings().removeClass('curr')
		})
		// 基于准备好的dom，初始化echarts实例
		var myChart1 = echarts.init(document.getElementById('main1'));
		var option1;
		// 柱状图
		option1 = {
		  title: {
		    text: '城市评级情况'
		  },
		  tooltip: {
		    trigger: 'axis',
		    axisPointer: {
		      type: 'shadow'
		    }
		  },
		  legend: {
			  top: '40px',
			  left: '-2px'
		  },
		  grid: {
		    left: '3%',
		    right: '4%',
		    top: '80px',
			bottom: '0',
		    containLabel: true
		  },
		  xAxis: {
		    type: 'value',
		    boundaryGap: [0, 0.01]
		  },
		  yAxis: {
		    type: 'category',
		    data: ['南平', '漳州', '龙岩', '宁德', '三明', '莆田', '泉州', '厦门', '福州']
		  },
		  series: [
		    {
		      name: '评级A',
		      type: 'bar',
			  itemStyle: {
				color: '#0081FF'
			  },
		      data: [10, 3, 5, 3, 10, 2, 16, 1, 2]
		    },
		    {
			  name: '评级B',
			  type: 'bar',
			  itemStyle: {
				color: '#4BBF73'
			  },
			  data: [1, 4, 6, 7, 2, 15, 5, 3, 6]
			},
		    {
			  name: '评级C',
			  type: 'bar',
			  itemStyle: {
				color: '#E5A54B'
			  },
			  data: [2, 4, 6, 7, 2, 15, 5, 3, 10]
			},
		    {
			  name: '评级D',
			  type: 'bar',
			  itemStyle: {
				color: '#FF5F57'
			  },
			  data: [8, 4, 6, 7, 2, 15, 5, 3, 10]
			}
		  ]
		};
		myChart1.setOption(option1);
		
		var option2
		echarts.registerMap('fujian', fujianJson);
		var myChart2 = echarts.init(document.getElementById('main2'));
		var option2 = {
			tooltip: {				
				trigger: 'item',
				formatter: function(param){
					let name = param.name + '</br>' +'注册申请医院:' + param.data.value[0] + '</br>' + '提交质控医院:' + param.data.value[1]
					return name
				}
			},
		   series: [{
           type: 'map',
           map: 'fujian',
           geoIndex: 0,
           aspectScale: 1, // 长宽比
           showLegendSymbol: true, // 存在legend时显示
           // data: this.allNumList, // 返回的数组
            label: {
                normal: {
					show: true,
					textStyle: {
						color: "#303339"
					}
				},
				emphasis: {
				    show: true,
				    textStyle: {
					   color: '#fff'
				    }
				}
            },
           roam: true,
           itemStyle: {
             normal: {
               label: {
                 show: true
               },
               areaColor: '#EDF3FF',
			   
             },
             emphasis: {
               areaColor: '#0081FF'
             }
           },
           animation: true,
			data: [
			   { name: '福州市', value: [43, 85] },
			   { name: '莆田市', value: [72, 53] },
			   { name: '泉州市', value: [86, 65] },
			   { name: '厦门市', value: [83, 73] },
			   { name: '漳州市', value: [72, 53] },
			   { name: '龙岩市', value: [72, 53] },
			   { name: '三明市', value: [72, 53] },
			   { name: '南平市', value: [43, 85] },
			   { name: '宁德市', value: [72, 53] }
			 ],
         },
         {
           type: 'lines',
           z: 3,
           // coordinateSystem: 'geo'
           // data: []
         }]
		};
		myChart2.setOption(option2);
		
		var option3
		var myChart3 = echarts.init(document.getElementById('main3'));
		option3 = {
		  
		  legend: {
			  top: '10px',
			  left: '0'
		  },
		  grid: {
		    left: '3%',
		    right: '4%',
			bottom: '0',
		    containLabel: true
		  },
		  tooltip: {},
		  dataset: {
		    source: [
		      ['product', '注册申请医院', '提交质控医院'],
		      ['福州', 43, 85],
		      ['厦门', 83, 73],
		      ['泉州', 86, 65],
		      ['莆田', 72, 53],
		      ['三明', 72, 53],
		      ['宁德', 72, 53],
		      ['龙岩', 72, 53],
		      ['漳州', 72, 53],
		      ['南平', 43, 85],
		    ]
		  },
		  xAxis: { type: 'category' },
		  yAxis: {},
		  // Declare several bar series, each will be mapped
		  // to a column of dataset.source by default.
		  series: [
			  { 
				  type: 'bar',
				  itemStyle: {
					color: '#0081FF'
				  },
			  }, {
				  type: 'bar',
				  itemStyle: {
					color: '#4BBF73'
				  },
			 }]
		};
		myChart3.setOption(option3);
		
		
		var option4
		var myChart4 = echarts.init(document.getElementById('main4'));
		option4 = {
		  
		  legend: {
		  			  top: '10px',
		  			  left: '-2px'
		  },
		  grid: {
		    left: '3%',
		    right: '3%',
		  			bottom: '0',
		    containLabel: true
		  },
		  tooltip: {},
		  dataset: {
		    source: [
		      ['product', '评级A', '评级B', '评级C', '评级D'],
		      ['科室设置', 85, 67, 55, 36],
		      ['人力配置', 73, 88, 50, 30],
		      ['检验检查', 65, 50, 67, 50]
		    ]
		  },
		  xAxis: { 
			  type: 'category'
		  },
		  yAxis: {
		  },
		  // Declare several bar series, each will be mapped
		  // to a column of dataset.source by default.
		  series: [
		  { 
			  type: 'bar',
			  itemStyle: {
				color: '#0081FF'
			  },
		  }, {
			  type: 'bar',
			  itemStyle: {
				color: '#4BBF73'
			  },
		 }, {
			  type: 'bar',
			  itemStyle: {
				color: '#E5A54B'
			  },
		 }, {
			  type: 'bar',
			  itemStyle: {
				color: '#FF5F57'
			  },
		 }]
		};
		myChart4.setOption(option4);
		
		var option5
		var myChart5 = echarts.init(document.getElementById('main5'));
		option5 = {
		  title: {
		    text: '评级占比',
		    left: '20px',
			top: '30px'
		  },
		  tooltip: {
		    trigger: 'item'
		  },
		  legend: {
		    left: 'left',
			top: '70px',
			left: '18px'
		  },
		  
		  series: [
		    {
		      type: 'pie',
			  radius: ['35%','55%'],
			  center: ['50%', '220px'],
			  color:['#0081FF', '#4BBF73', '#E5A54B', '#FF5F57'],
			  labelLine:{
				 length: 10
			  },
			  label:{
				  formatter:"{b}\n\n",
				  padding:[0,-20]
			  },
		      data: [
		        { value: 1048, name: '评级A' },
		        { value: 735, name: '评级B' },
		        { value: 580, name: '评级C' },
		        { value: 484, name: '评级D' }
		      ],
		      emphasis: {
		        itemStyle: {
		          shadowBlur: 10,
		          shadowOffsetX: 0,
		          shadowColor: 'rgba(0, 0, 0, 0.5)'
		        }
		      }
		    }
		  ]
		};
		myChart5.setOption(option5);
		
		var option6
		var myChart6 = echarts.init(document.getElementById('main6'));
		option6 = {
		  
		  legend: {
			  top: '10px',
			  left: '-2px'
		  },
		  grid: {
		    left: '3%',
		    right: '3%',
			bottom: '0',
		    containLabel: true
		  },
		  tooltip: {
			  position: function(point, params, dom, rect, size){
			   //  size为当前窗口大小
			   if((size.viewSize[0]/2)>=point[0]){
				   //其中point为当前鼠标的位置
				   return [point[0]+10,'5%'];
			   }else{
				   //其中point为当前鼠标的位置
				   return [point[0]-50,'5%'];
			   }
			  }
		  },
		  dataset: {
		    source: [
		      ['product', '评级A', '评级B', '评级C', '评级D'],
		      ['血压的测量', 43, 85, 43, 85],
		      ['病史采集及体格检查', 83, 73, 53, 73],
		      ['辅助检查', 86, 65, 43, 85],
		      ['诊断病情评估', 86, 65, 63, 66],
		      ['高血压的治疗及疗效评价', 86, 65, 40, 65]
		    ]
		  },
		  xAxis: {
			  type: 'category',
			  axisLabel: {
				// 坐标轴刻度标签换行处理
				formatter: function (params) {
				  var newParamsName = ""; // 最终拼接成的字符串
				  var paramsNameNumber = params.length; // 实际标签的个数
				  var provideNumber = 3; // 每行能显示的字的个数
				  var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
				  /**
				   * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
				   */
				  // 条件等同于rowNumber>1
				  if (paramsNameNumber > provideNumber) {
					/** 循环每一行,p表示行 */
					for (var p = 0; p < rowNumber; p++) {
					  var tempStr = ""; // 表示每一次截取的字符串
					  var start = p * provideNumber; // 开始截取的位置
					  var end = start + provideNumber; // 结束截取的位置
					  // 此处特殊处理最后一行的索引值
					  if (p == rowNumber - 1) {
						// 最后一次不换行
						tempStr = params.substring(start, paramsNameNumber);
					  } else {
						// 每一次拼接字符串并换行
						tempStr = params.substring(start, end) + "\n";
					  }
					  newParamsName += tempStr; // 最终拼成的字符串
					}
				  } else {
					// 将旧标签的值赋给新标签
					newParamsName = params;
				  }
				  //将最终的字符串返回
				  return newParamsName;
				}
			  }
		  },
		  yAxis: {},
		  // Declare several bar series, each will be mapped
		  // to a column of dataset.source by default.
		  series: [
			  { 
				  type: 'bar',
				  itemStyle: {
					color: '#0081FF'
				  },
			  }, {
				  type: 'bar',
				  itemStyle: {
					color: '#4BBF73'
				  },
			 }, {
				  type: 'bar',
				  itemStyle: {
					color: '#E5A54B'
				  },
			 }, {
				  type: 'bar',
				  itemStyle: {
					color: '#FF5F57'
				  },
			 }
			]
		};
		myChart6.setOption(option6);
	</script>
</html>
